<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <script src="static/js/vendor/jquery-3.0.0.min.js"></script>
    <link rel="stylesheet" href="/static/css/login.css">
</head>
<body>
    <!-- 上方装饰图片 -->
    <img src="static/img/logreg_top.png"
         alt="注册图标"
         class="banner">

    <div class="container">
        <h1 class="form-title">创建账户</h1>

        <!-- 邮箱输入 -->
        <div class="form-group">
            <input name="email" type="email" id="email" required>
            <label for="email">电子邮箱</label>
            <div class="error" id="emailError">请输入有效的邮箱地址</div>
        </div>

        <!-- 用户名输入 -->
        <div class="form-group">
            <input name="username" type="username" id="username" required>
            <label for="username">用户名</label>
            <div class="error" id="usernameError">用户名不能为空</div>
        </div>

        <!-- 密码输入 -->
        <div class="form-group">
            <input name="password" type="password" id="password">
            <label for="password">密码</label>
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
            <input name="password" type="password" id="confirmPassword">
            <label for="confirmPassword">确认密码</label>
            <div class="error" id="confirmError">两次输入的密码不一致</div>
        </div>

        <button type="submit" class="reg-btn" id="reg">立即注册</button>
        <a class="reg_log" href="{{ url_for('.login') }}">已注册, 登录</a>
    </div>

    <script>
        const emailError = document.getElementById('emailError');
        const usernameError = document.getElementById('usernameError');
        const passwordError = document.getElementById('passwordError');
        const confirmError = document.getElementById('confirmError');

        // 实时验证逻辑
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', () => {
                validateField(input);
                // 特别处理确认密码
                if (input.id === 'password' || input.id === 'confirmPassword') {
                    validatePasswordMatch();
                }
            });
        });

        $("#reg").click(function(){
            var email = $("#email").val();
            var user = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                url: '{{ url_for('.register') }}',            //向服务器请求的url, 必须
                type: 'post',       //必须
                data: {             //传给服务器的数据, 必须
                    'email':email,
                    'user':user,
                    'password':password,
                },
                success: function(data){        //后端服务器响应之后，执行此代码, 必须
                    state = data.status;
                    errmsg = data.errmsg;
                    //layer.msg(errmsg);
                    alert(errmsg);

                    if (state==0){
                        setTimeout(function(){
                            window.location.href = "{{ url_for('.login') }}";
                        }, "2000");
                    }
                }
            });
        })

        function validateField(field) {
            const value = field.value.trim();
            const errorElement = field.parentElement.querySelector('.error');

            if (field.required && !value) {
                showError(errorElement, '该字段不能为空');
                return false;
            }

            if (field.id === 'email' && !isValidEmail(value)) {
                showError(errorElement, '请输入有效的邮箱地址');
                return false;
            }

            /*
            if (field.id === 'username' && value.length < 4) {
                showError(errorElement, '用户名至少需要4个字符');
                return false;
            }

            if (field.id === 'password' && value.length < 6) {
                showError(errorElement, '密码至少需要6个字符');
                return false;
            }
            */

            hideError(errorElement);
            return true;
        }

        function validatePasswordMatch() {
            const password = document.getElementById('password').value;
            const confirm = document.getElementById('confirmPassword').value;

            if (password !== confirm) {
                showError(confirmError, '两次输入的密码不一致');
                return false;
            }
            hideError(confirmError);
            return true;
        }

        function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }

        function showError(element, message) {
            element.textContent = message;
            element.style.display = 'block';
        }

        function hideError(element) {
            element.style.display = 'none';
        }

    </script>
</body>
</html>